<div
  class="accessory-box"
  [ngClass]="{ 'accessory-on': service.values.Active || service.values.On }"
  (longClick)="onLongClick()"
  (shortClick)="onClick()"
  tabindex="0"
>
  <div class="d-flex flex-column h-100">
    @if (service.values.ValveType === 0 || !service.values.ValveType) {
    <div [attr.aria-label]="'accessories.core.generic_valve' | translate" class="accessory-svg">
      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <!-- top twister -->
        <line x1="8" y1="3" x2="14" y2="3" stroke="#7f7f7f" stroke-width="3" stroke-linecap="round" />
        <!-- twister to main pipe -->
        <line x1="11" y1="8" x2="11" y2="3" stroke="#7f7f7f" stroke-width="3" stroke-linecap="round" />
        <!-- main pipe -->
        <line x1="0" y1="9" x2="21" y2="9" stroke="#7f7f7f" stroke-width="4" stroke-linecap="round" />
        <!-- nozzle -->
        <line x1="21" y1="9" x2="21" y2="14" stroke="#7f7f7f" stroke-width="4" stroke-linecap="round" />
        <!-- top row of drops -->
        <circle class="drop drop-top" fill="#1976d2" fill-opacity="0" cx="21" cy="19" r="1.5" />
        <!-- middle row of drops -->
        <circle class="drop drop-middle" fill="#1976d2" fill-opacity="0" cx="17" cy="24" r="1.5" />
        <circle class="drop drop-middle" fill="#1976d2" fill-opacity="0" cx="25" cy="24" r="1.5" />
        <!-- bottom row of drops -->
        <circle class="drop drop-bottom" fill="#1976d2" fill-opacity="0" cx="13" cy="29" r="1.5" />
        <circle class="drop drop-bottom" fill="#1976d2" fill-opacity="0" cx="21" cy="29" r="1.5" />
        <circle class="drop drop-bottom" fill="#1976d2" fill-opacity="0" cx="29" cy="29" r="1.5" />
      </svg>
    </div>
    } @else if (service.values.ValveType === 1) {
    <div [attr.aria-label]="'accessories.core.irrigation_valve' | translate" class="accessory-svg">
      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <!-- small drops, left to right -->
        <circle class="drop drop-out" fill="#1976d2" fill-opacity="0" cx="1" cy="16" r="1" />
        <circle class="drop drop-out" fill="#1976d2" fill-opacity="0" cx="6" cy="8" r="1" />
        <circle class="drop drop-out" fill="#1976d2" fill-opacity="0" cx="16" cy="4" r="1" />
        <circle class="drop drop-out" fill="#1976d2" fill-opacity="0" cx="26" cy="8" r="1" />
        <circle class="drop drop-out" fill="#1976d2" fill-opacity="0" cx="31" cy="16" r="1" />
        <!-- large drops, left to right -->
        <circle class="drop drop-in" fill="#1976d2" fill-opacity="0" cx="7" cy="16" r="1.5" />
        <circle class="drop drop-in" fill="#1976d2" fill-opacity="0" cx="25" cy="16" r="1.5" />
        <circle class="drop drop-in" fill="#1976d2" fill-opacity="0" cx="10.5" cy="11.5" r="1.5" />
        <circle class="drop drop-in" fill="#1976d2" fill-opacity="0" cx="21.5" cy="11.5" r="1.5" />
        <circle class="drop drop-in" fill="#1976d2" fill-opacity="0" cx="16" cy="9" r="1.5" />
        <!-- vertical pipe -->
        <line x1="16" y1="16" x2="16" y2="31" stroke="#7f7f7f" stroke-width="2" stroke-linecap="round" />
        <!-- spout -->
        <line x1="14" y1="16" x2="18" y2="16" stroke="#7f7f7f" stroke-width="4" stroke-linecap="round" />
        <!-- grass -->
        <line
          class="grass"
          x1="4"
          y1="31"
          x2="28"
          y2="31"
          stroke="#7f7f7f"
          stroke-opacity="0.5"
          stroke-width="10"
          stroke-linecap="round"
        />
      </svg>
    </div>
    } @else if (service.values.ValveType === 2) {
    <div [attr.aria-label]="'accessories.core.shower_head_valve' | translate" class="accessory-svg">
      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <!-- top horizontal pipe -->
        <line x1="1" y1="1" x2="16" y2="1" stroke="#7f7f7f" stroke-width="2" stroke-linecap="round" />
        <!-- left vertical pipe -->
        <line x1="1" y1="1" x2="1" y2="31" stroke="#7f7f7f" stroke-width="2" stroke-linecap="round" />
        <!-- pipe to head -->
        <line x1="16" y1="1" x2="16" y2="3" stroke="#7f7f7f" stroke-width="2" stroke-linecap="round" />
        <!-- shower head -->
        <path d="M8 11 A8 7 0 0 1 24 11" fill="none" stroke="#7f7f7f" stroke-width="2" />
        <line x1="7" y1="11" x2="25" y2="11" stroke="#7f7f7f" stroke-width="2" stroke-linecap="round" />
        <!-- large drops, left to right -->
        <circle class="drop drop-top" fill="#1976d2" fill-opacity="0" cx="8" cy="16" r="1.25" />
        <circle class="drop drop-top" fill="#1976d2" fill-opacity="0" cx="13.3" cy="16" r="1.25" />
        <circle class="drop drop-top" fill="#1976d2" fill-opacity="0" cx="18.6" cy="16" r="1.25" />
        <circle class="drop drop-top" fill="#1976d2" fill-opacity="0" cx="24" cy="16" r="1.25" />
        <!-- middle drops, left to right -->
        <circle class="drop drop-middle" fill="#1976d2" fill-opacity="0" cx="8" cy="22" r="1" />
        <circle class="drop drop-middle" fill="#1976d2" fill-opacity="0" cx="13.3" cy="22" r="1" />
        <circle class="drop drop-middle" fill="#1976d2" fill-opacity="0" cx="18.6" cy="22" r="1" />
        <circle class="drop drop-middle" fill="#1976d2" fill-opacity="0" cx="24" cy="22" r="1" />
        <!-- small drops, left to right -->
        <circle class="drop drop-bottom" fill="#1976d2" fill-opacity="0" cx="8" cy="28" r="0.75" />
        <circle class="drop drop-bottom" fill="#1976d2" fill-opacity="0" cx="13.3" cy="28" r="0.75" />
        <circle class="drop drop-bottom" fill="#1976d2" fill-opacity="0" cx="18.6" cy="28" r="0.75" />
        <circle class="drop drop-bottom" fill="#1976d2" fill-opacity="0" cx="24" cy="28" r="0.75" />
      </svg>
    </div>
    } @else if (service.values.ValveType === 3) {
    <div [attr.aria-label]="'accessories.core.faucet_valve' | translate" class="accessory-svg">
      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <!-- sink -->
        <rect class="sink" x="-3" y="28" width="21" height="6.5" fill="#7f7f7f" stroke-width="0" fill-opacity="0.5" />
        <!-- cold tap -->
        <line
          stroke-linecap="round"
          x1="24"
          y1="18"
          x2="26"
          y2="18"
          stroke="#1976d2"
          stroke-width="3"
          stroke-opacity="0.5"
        />
        <!-- hot tap -->
        <line
          stroke-linecap="round"
          x1="20"
          y1="18"
          x2="22"
          y2="18"
          stroke="#d32f2f"
          stroke-width="3"
          stroke-opacity="0.5"
        />
        <!-- tap outline -->
        <rect x="19" y="16.5" rx="1" width="8" height="3" fill="none" stroke-width="1" stroke="#7f7f7f" />
        <!-- tap shape -->
        <path d="M10 9 C10 -1, 23 -1, 23 10 V26" fill="none" stroke="#7f7f7f" stroke-width="2" />
        <!-- water -->
        <line class="stream" x1="10" y1="9" x2="10" y2="28" stroke="#1976d2" stroke-opacity="0" stroke-width="1.5" />
        <!-- tap base -->
        <line x1="20" y1="31" x2="26" y2="31" stroke="#7f7f7f" stroke-width="10" stroke-linecap="round" />
      </svg>
    </div>
    }
    <div class="accessory-label mt-auto">
      {{ service.customName || service.values.ConfiguredName || service.serviceName }}
    </div>
    @if (service.values.Active && remainingDuration) {
    <div class="accessory-label grey-text">{{ remainingDuration }}</div>
    } @else if ((service.values.Active && !remainingDuration) || service.values.On) {
    <div class="accessory-label grey-text">{{ 'accessories.control.running' | translate }}</div>
    } @else {
    <div class="accessory-label grey-text">{{ 'accessories.control.off' | translate }}</div>
    }
  </div>
</div>
